<template>
    <div :id="id"
         :style="{width, height}"></div>
</template>

<script>
    import * as echarts from 'echarts'
    import * as util from '@/utils/utils.js'

    export default {
        props: {
            id: {
                type: String,
                default: 'echarts'
            },
            width: {
                type: String,
                default: '100%'
            },
            height: {
                type: String,
                default: '100%'
            },
            subcaption: {
                type: String,
            },
            xAxisMin: {
                type: Number,
                default: 0
            },
            xAxisMax: {
                type: Number,
                default: 0
            },
            xAxisAxisLabelShow: {
                type: Boolean,
                default: true
            },
            backgroundShow: {
                //默认为跟页面大背景一样
                type: String,
                default: ''
            },
            innerBackgroundShow: {
                type: Boolean,
                default: false
            },
            splitNumber: {
                type: Number,
                default: 3
            },
            iontempData: {
                type: Array
            },
            grid: {
                type: Object,
                default:function(){
                    return {x: '5%', x2: '2%', y: '5%', y2: '5%',}
                },
            },
        },
        mounted() {
            this.init()
        },
        data() {
            return {
                yMax: '1e6',
                yMin: '1e4'
            }
        },
        methods: {
            init() {
                this.charts = echarts.init(document.getElementById(this.id));
                var _this = this;

                this.charts.setOption({
                    backgroundColor: this.backgroundShow,
                    grid: this.grid,
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        // axisPointer: {
                        //     type: 'shadow',
                        //     shadowStyle: {
                        //         color: 'rgba(0, 0, 0, 0.2)',
                        //     }
                        // },
                        backgroundColor: 'rgba(255, 255, 255, 0.8)',
                        formatter: function (params) {
                            const param1 = params[0];
                            var date = new Date(param1.value[0]);
                            var month = date.getMonth() + 1;
                            var day = date.getDate();
                            var hour = date.getHours();
                            var minutes = date.getMinutes();
                            return date.getFullYear() + '/' + (month>9 ? month : '0'+month) + '/' + (day>9 ? day : '0'+day) + ' ' +
                                (hour>9 ? hour : '0'+hour) + ':' + (minutes>9 ? minutes : '0'+minutes) + '<br>' +
                                param1.marker + param1.seriesName + ' : ' + util.formatValueToE(param1.value[1], 2, true)
                        },
                    },
                    xAxis: [{
                        type: 'time',
                        // interval: 86400000,
                        axisLabel: {
                            formatter: function (value, index) {
                                var date = new Date(value);
                                var month = date.getMonth() + 1;
                                var day = date.getDate();
                                var texts = [month>9 ? month.toString() : '0'+month, day>9 ? day.toString() : '0'+day];
                                return texts.join('/');
                            },
                            showMinLabel: true,
                            showMaxLabel: true,
                            show: this.xAxisAxisLabelShow
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                            }
                        },
                        axisTick: {
                            show: true,
                            inside: true,
                            length: 8
                        },
                        minorTick: {
                            show: true,
                            splitNumber: 8
                        },
                        splitNumber: this.splitNumber,
                        min: this.xAxisMin,
                        max: this.xAxisMax,
                    },{
                        type: 'time',
                        position: 'top',
                        axisLine: {
                            onZero: false
                        },
                        axisPointer: {
                            show:false
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                            }
                        },
                        axisTick: {
                            show: true,
                            inside: true,
                            length: 8
                        },
                        minorTick: {
                            show: true,
                            splitNumber: 8
                        },
                        axisLabel: {
                            show: false
                        },
                        splitNumber: this.splitNumber,
                        min: this.xAxisMin,
                        max: this.xAxisMax,
                    }],
                    yAxis: [{
                        type: 'log',
                        name: 'Temperature ({up|o}K)',
                        nameLocation: 'middle',
                        nameGap: 45,
                        splitArea: {
                            show: this.innerBackgroundShow,
                            areaStyle: {
                                color: 'white'
                            }
                        },
                        nameTextStyle: {
                            fontFamily: 'Microsoft YaHei',
                            fontSize: '12',
                            color: 'green',
                            rich:{
                                up: {
                                    verticalAlign: "top",
                                    fontSize: 8
                                }
                            }
                        },

                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                            }
                        },
                        axisTick: {
                            show: true,
                            inside: true,
                            color: '#000000'
                        },
                        axisLine: {
                            show: true
                        },
                        axisLabel: {
                            formatter: function (value) {
                                var p = Math.floor(Math.log(value) / Math.LN10);
                                var n = value * Math.pow(10, -p);
                                if (n === 10) {
                                    n = 1;
                                    p = p + 1;
                                }
                                return '10' + '{power|'+p+'}';
                            },
                            rich: {
                                power: {
                                    fontSize: 8,
                                    padding: [-8,0,0,0]
                                },
                            },
                            showMinLabel: true,
                            showMaxLabel: true,
                        },
                        min: function (value) {
                            if (value.min < 10000) {
                                if (value.min < 0) {
                                    _this.yMin = 1e3; return _this.yMin;
                                } else {
                                    var num = value.min * 0.7 / 100;
                                    _this.yMin = util.formatValueToE(Math.ceil(num) * 100, 0);
                                    _this.yMin = '1e' + (_this.yMin[_this.yMin.length-1]*1+_this.yMin.length-2);
                                    return _this.yMin;
                                }
                            } else {
                                _this.yMin = 10000;
                                return _this.yMin;
                            }
                        },
                        max: function (value) {
                            if (value.max > 1000000) {
                                var num = value.max * 1.3 / 100;
                                _this.yMax = util.formatValueToE(Math.ceil(num) * 100, 0);
                                _this.yMax = '1e' + (_this.yMax[_this.yMax.length-1]*1+_this.yMax.length-2);
                                return _this.yMax;
                            } else {
                                _this.yMax = 1000000;
                                return _this.yMax;
                            }
                        },
                        interval: '1e1'
                        },
                        {
                            type: 'log',
                            position: 'right',
                            axisTick: {
                                show: true,
                                inside: true,
                                color: '#000000'
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                }
                            },
                            axisLabel: {
                                show: false
                            },
                            axisLine: {
                                show: true
                            },
                            min: function (value) {
                                return _this.yMin;
                            },
                            max: function (value) {
                                return _this.yMax;
                            }
                        }
                    ],
                    series: [
                        {
                            name: 'Temperature',
                            type: 'scatter',
                            symbol: 'circle',
                            symbolSize: 1,
                            showSymbol: false,
                            showAllSymbol: true,
                            lineStyle: {
                                color: 'green',
                                width: 1,
                            },
                            itemStyle: {
                                color: 'green'
                            },
                            data: this.iontempData,
                        },
                    ],
                })
            }
        }
    }
</script>

<style scoped>

</style>